<template>
  <div class="breadcrumb">
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="(router, i) in breadcrumbList" :key="i">
        <span v-if="breadcrumbList.length - 1 === i">{{ router?.meta?.title }}</span>
        <router-link v-else :to="router">{{ router?.meta?.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";
import { computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const breadcrumbList = computed(() =>
  route.matched.filter((route) => route?.meta?.title)
);
defineOptions({
  name: "Breadcrumb",
});
</script>
